<template>
  <div ref="recommend" class="recommend">
    <scroll ref="scroll" :data="discList" class="recommend-content">
      <template slot="default">
        <!-- 只能有一个滚动的根元素 -->
        <div>
          <!-- 轮播图 -->
          <div v-if="recommends.length" ref="sliderWrapper" class="slider-wrapper">
            <slider>
              <template slot="default">
                <div v-for="(item, index) in recommends" :key="index">
                  <a :href="item.jumpurl ? item.jumpurl : 'javascript:;'">
                    <!-- 添加 needsclick 不会拦截点击事件 -->
                    <img :src="item.pic" :fid="item.fid" :id="item.id" :title="item.title" :type="item.type" class="needsclick" alt @load="loadImage" />
                  </a>
                </div>
              </template>
            </slider>
          </div>

          <!-- 推荐歌单数据 -->
          <div class="recommend-list">
            <h1 class="list-title">热门歌单推荐</h1>
            <!-- <div v-show="$store.state.name">123</div> -->
            <div class="disList">
              <ul>
                <li v-for="(item, index) in discList" :key="index" class="item" @click="selectItem(item)" >
                  <img v-lazy="item.imgurl" alt width="60" height="60" class="img" />
                  <div class="text">
                    <div class="name" v-html="item.creator.name" />
                    <div class="desc" v-html="item.dissname" />
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </template>
      <!-- 加载标志 -->
      <div v-show="!discList.length" class="loading-container">
        <loading />
      </div>
    </scroll>

    <transition name="slide">
      <router-view />
    </transition>
  </div>
</template>

<script type="text/ecmascript-6">
import Scroll from 'base/scroll/scroll'
import Slider from 'base/slider/slider'
import Loading from 'base/loading/loading'
// import { getRecommend, getDisList } from 'api/recommend'
import { getRecommend, getDisList } from 'api/recommend'
import { ERR_OK } from 'api/config'
import { playlistMixin } from 'common/js/mixin'
import { mapMutations } from 'vuex'
export default {
  mixins: [playlistMixin],
  data () {
    return {
      recommends: [], // 轮播图数据
      discList: [] // 歌单数据
    }
  },
  activated () {
    // console.log('激活')
    // console.log(this.$store.state.name)
    this.$refs.scroll.refresh()
  },
  deactivated () {
    // console.log('销毁')
  },
  created () {
    this._getRecommend()
    this._getDisList()
  },
  methods: {
    _getRecommend () {
      try {
        getRecommend()
          .then(result => {
            console.log(result)
            if (result.code === ERR_OK) {
              this.recommends = result.data.focus
              // console.log(this.$store.state.name)
            }
          })
          .catch(error => {
            console.error(error)
          })
      } catch (accident) {
        console.log(accident)
      }
    },
    _getDisList () {
      try {
        getDisList()
          .then(result => {
            // console.log(result)
            if (result && result.code === ERR_OK) {
              this.discList = result.data.list
            }
          })
          .catch(error => {
            console.log(error)
          })
      } catch (accident) {
        console.log(accident)
      }
    },
    loadImage () {
      // 调动旗帜 确保逻辑只执行一次 刷新Scroll
      // console.log(this.checkloaded)
      // 在 this 定义一个变量 checkloaded
      if (!this.checkloaded) {
        this.checkloaded = true
        this.$refs.scroll.refresh()
      }
    },
    handlePlaylist (palylist) {
      const bottom = palylist.length ? '60px' : ''
      this.$refs.recommend.style.bottom = bottom
      this.$refs.scroll.refresh()
    },
    selectItem (item) {
      // console.log(item)
      this.$router.push({ name: 'Disc', params: { id: item.dissid } })
      this.setDisc(item)
    },

    ...mapMutations({
      setDisc: 'SET_DISC'
    })
  },
  components: { Scroll, Slider, Loading }
}
</script>

<style lang="stylus" scoped rel="stylesheet/stylus">
@import '~common/stylus/variable';

.recommend {
  position: fixed;
  top: 88px;
  bottom: 0;
  width: 100%;

  .recommend-content {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .slider-wrapper {
      width: 100%;
      overflow: hidden;
    }

    .recommend-list {
      .list-title {
        width: 100%;
        height: 65px;
        line-height: 65px;
        text-align: center;
        font-size: $font-size-medium;
        color: $color-theme;
        font-weight: bold;
        letter-spacing: 2px;
      }

      .disList {
        .item {
          display: flex;
          padding: 0 20px;
          margin-bottom: 20px;

          .img {
            margin-right: 20px;
          }

          .text {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            font-size: $font-size-medium;

            .desc {
              color: $color-text-d;
              display: -webkit-box;
              overflow: hidden;
              white-space: normal !important;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
        }

        .item:last-child {
          margin-bottom: 0;
        }
      }
    }

    .loading-container {
      width: 100%;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .slide-enter-active, .slide-leave-active {
    transition: all 0.4s;
  }

  .slide-enter, .slide-leave-to {
    // opacity 0;
    transform: translate3d(100%, 0, 0);
  }
}
</style>
